webpack, rollup

❓질문

webpack, rollup과 같은 번들러는 왜 필요한지 설명해주세요.

💡 조사하기전 내가 알고 있던 내용

초기 브라우저에서는 ESM을 지원하지 않았습니다 그 이유로는 그 당시의 브라우저만 하더라도 <script>태그 몇개만 있었으면 충분히 제 할일을 했기때문입니다 하지만 웹 브라우저의 요구사항이 많아지고 각종 기능이 많아지다보니 자바스크립트 파일을 나누고 그에 대한 각종 최적화를 해줄 전처리기가 필요하게 되었습니다

그렇게 많은 번들러들이 나오게 됐고 현대에 와서는 webpack, vite등의 번들러를 많이 사용하고있습니다.

그렇다면 왜 번들러가 필요한지에 대해서 설명을 하면

첫번째로는 네트워크의 요청수를 줄여줍니다 이는 많은 html css js 파일을 묶어 수백개의 파일이 아닌 소수의 파일로 묶어 전달을 합니다.
이는 그렇다면 결국 용량은 똑같으니 다를거 없는거아닌가 싶지만

두번째로는 이 소수의 파일로 묶을때 최적화를 진행한다는겁니다.
트리 셰이킹(사용하지않는 코드 제거)이나 캐싱, 압축 , 이미지 최적화등 다양한 방법으로 코드를 최적화시켜주며 최종적으로는 번들러를 사용하지않는 코드보다 대략 50%가량의 압축률을 보여줍니다.

🏫 정리한 내용

덤으로 번들러 사용해 용량이 큰 파일로 만들경우 초기 로딩에 영향을 미칠 수도 있으니 코드 스플리팅기법을 통해 코드를 나눠 사용자 경험을 좋게 만드는 것도 잊으면 안될것 같습니다.